<template>
  <div>
    <a-modal :visible="visible" @cancel="onClose" @ok="handleOk">
      <a-tree
          v-model:selectedKeys="selectedKeys"
          v-model:checkedKeys="checkedKeys"
          checkable
          :tree-data="rightsList"
      >
        <template #title="{ authName, menuPid }">
          <span v-if="menuPid === 0 " style="color: #1890ff">{{ authName }}</span>
          <template v-else>{{ authName }}</template>
        </template>
      </a-tree>
    </a-modal>

  </div>
</template>

<script>
import {ref} from "vue";
import {getAllRightsTree,} from "@/apis/menu";
import {getAuthIdByRoleId, updateRights} from "@/apis/role";
import {message} from "ant-design-vue";

export default {
  name: "SetRightDialog",
  setup() {
    const visible = ref(false)
    const rightsList = ref([])
    const selectedKeys = ref([]);
    const checkedKeys = ref([]);
    const expandKeys = ref([]);
    const roleId = ref(0);
    const fieldNames = {
      children: 'children',
      title: 'authName',
    };

    const showDialog = (value) => {
      roleId.value = value;
      getAllRightsTree().then(res => {
        const treeData = res.data

        treeData.map(item => {
          expandKeys.value.push(item.menuId)
          item.key = item.menuId + ''
          item.children.map(itm => {
            itm.key = itm.menuId + ''
          })
        })

        rightsList.value = treeData;
      })
      getAuthIdByRoleId(roleId.value).then(res => {
        checkedKeys.value = res.data
      })
      visible.value = true;
    }
    const handleOk = () => {
      updateRights(roleId.value,checkedKeys.value).then(res=>{
        if (res.data === 1) {
          message.success("更新成功")
        }
      })
      setTimeout(()=>{
        onClose()
      },1000)
    }
    const onClose = () => {
      visible.value = false;
    }
    return {
      visible,
      handleOk,
      showDialog,
      selectedKeys,
      checkedKeys,
      rightsList,
      fieldNames,
      expandKeys,
      onClose,
    }
  },
}
</script>

<style scoped>

</style>